<template>
  <div
    class="generalSearch-container"
    style="display: flex; align-items: center; flex-direction: column"
  >
    <div class="searchResult" style="width: 1100px; margin-bottom: 10px">
      <!-- 不同排序的切换通过button实现不是通过tab，参考b站 -->
      <el-card shadow="hover" class="search-result-card">
        <div
          class="clearfix"
          slot="header"
          style="display: flex; flex-direction: column; align-items: flex-start"
        >
          <span
            style="font-size: 16px; font-weight: 600px; margin: 0px 0px 5px 5px"
            >搜索结果</span
          >
          <el-row>
            <el-col :span="24">
              <!-- 使用vue的循环生成button -->
              <el-button
                v-for="(sortTypeItem, index) in sortType"
                :key="index"
                size="mini"
                :class="{
                  'is-active': currentSortType === sortTypeItem.sortTypeName,
                }"
                @click="changeSortType(sortTypeItem.sortTypeName)"
                >{{ sortTypeItem.name }}</el-button
              >
            </el-col>
          </el-row>
        </div>
        <!-- 每次检索时占据临时空间做加载动画 -->
        <el-card
          v-if="loading"
          v-loading="loading"
          style="width: 100%; height: 300px"
          element-loading-text="拼命加载中捏..."
        >
        </el-card>
        <!-- 检索结果列表组件 -->
        <blog-list :blogLists="searchedResult"></blog-list>
      </el-card>
      <!-- 继续加载更多的按钮 -->
      <div style="width: 100%; text-align: center; margin: 10px auto">
        <el-button
          type="primary"
          plain
          size="medium"
          @click="getSearchResult"
          :loading="loading"
          >加载更多</el-button
        >
      </div>
    </div>
    <!-- 回到顶部的按钮,设置至少滚400px可见 -->
    <el-backtop :visibility-height="800" :right="40" :bottom="20"> </el-backtop>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import blogList from "./components/blogList.vue";
import { advancedSearchArticles, } from "@/apis/apis";

@Component({
  name: "generalSearch",
  components: {
    blogList,
  },
})
export default class generalSearch extends Vue {
  // 从路由中获取查询参数，当前页面的route变化
  @Watch("$route.query.searchText", { immediate: true, deep: true })
  onUrlChange() {
    // console.log(this.$route.query.searchText);
    this.searchText = (this.$route.query.searchText as string) || "";
    if (this.searchText.length > 0) {
      // 每次检索时清空之前的检索结果
      this.searchedResult = [];
      // 开启加载动画
      this.loading = true;
      // 将页码重置为0
      this.currentPage = 0;
      this.getSearchResult();
      // console.log(this.searchText);
    }
    // console.log(this.$route.query.searchText);
  }
  
  // 检索结果的排序方式
  sortType: Array<{ sortTypeName: string; name: string }> = [
    { sortTypeName: "synthesis", name: "相关性" },
    { sortTypeName: "latest", name: "最新发布" },
    { sortTypeName: "hottest", name: "最多浏览" },
    { sortTypeName: "4", name: "最多收藏" },
  ];
  // 当前选中的排序方式,由此判断按钮的激活状态
  currentSortType: string = "synthesis";
  // 点击改变按钮的激活状态
  changeSortType(sortType: string) {
    this.currentSortType = sortType;
    // 重新请求数据,在数据未到达之前显示加载中的动画
    this.searchedResult = [];
    this.loading = true;
    this.getSearchResult();
    // console.log(this.currentSortType);
  }
  // 不同排序方式的结果使用同一个对象进行维护，参考csdn
  searchedResult: Array<{
    knowledgeId: number;
    title: string;
    content: string;
    viewCounts?: number;
    collectCounts?: number;
    likeCounts?: number;
    commentCounts?: number;
    author?: string;
    publishTime?: string;
  }> = [];
  // 记录页码和页数
  pageSize: number = 10;
  currentPage: number = 0;
  // 当前的请求检索的内容
  searchText: string = "";
  // 数据加载的标志
  loading: boolean = true;
  // 获取检索结果
  getSearchResult(): void {
    advancedSearchArticles({
      keyword: this.searchText,
      sortType: this.currentSortType,
      pageNo: this.currentPage,
      pageSize: this.pageSize,
    })
      .then((res) => {
        // console.log(res);
        // console.log(this.currentPage);
        let resSearchResult = res.data.data.records;
        resSearchResult.forEach((item: any) => {
          this.searchedResult.push({
            knowledgeId: item.knowledgeId,
            title: item.title,
            content: item.content,
            viewCounts: item.viewCounts,
            collectCounts: item.collectCounts,
            likeCounts: item.likeCounts,
            commentCounts: item.commentCounts,
            author: item.nickName,
            publishTime: item.createTime,
          });
        });
        this.loading = false;
      })
      .catch((err) => {
        console.log(err);
        console.log("this is error from generalSearch getSearchResult");
      });
  }
}
</script>

<style lang="scss" scoped>
.generalSearch-container {
  margin-top: 20px;
  margin: 0 auto;
  .searchResult {
    .search-result-card {
      &::v-deep(.el-card__header) {
        padding: 10px 20px;
      }
      &::v-deep(.el-card__body) {
        padding: 10px 20px;
      }
      .clearfix {
        span {
        }
        .is-active {
          background-color: #409eff;
          color: #fff;
        }
      }
    }
  }
}
</style>